<template>
	<view class="page" :style="{backgroundImage: 'url(' + commonData.mineData.mineTopBg +')'}">
		<u-navbar title="我的" :is-back="false" title-color="#111111" :background="background"></u-navbar>
		<view class="flex-col">
			<view class="flex-col self-stretch group">
				<view class="flex-col group_2">
					<view class="flex-row justify-between group_3">
						<view class="flex-row items-center self-center flex-1">
							<view class="avatar-wrap flex-row justify-center items-center">
								<image class="image_2" :src="avatar ? avatar : commonData.mineData.avatarImg" />
							</view>

							<view class="flex-col items-start ml-13-5  flex-1">
								<text class="font">{{nickname}}</text>
								<view class="flex-row">
									<view v-if="level == 0" class="flex-row items-center user-level-btn">
										<image class="user-level-img"
											src="https://terminator.axu9.com/images/user-level-icon.png" />
										<text class="">普通用户</text>
									</view>
									<view v-if="level == 1" class="flex-row items-center user-level-btn">
										<image class="user-level-img"
											src="https://terminator.axu9.com/images/user-level-icon.png" />
										<text class="">激活用户</text>
									</view>
									<view v-if="level == 2"
										class="flex-row items-center justify-center user-level-btn-yin">

										<text class="">银牌</text>
									</view>
									<view v-if="level == 3"
										class="flex-row items-center justify-center user-level-btn-jin">

										<text class="">金牌</text>
									</view>
									<view class="slot-content flex-row ml-10">
										<view class="mobile" v-if="!mobile" style="" @click="openBindPhone">请授权手机号
										</view>
										<view class="mobile" v-if="mobile" style="">手机号：{{mobile}}</view>
									</view>
								</view>

							</view>
						</view>
						<!-- <view class="flex-row items-center">
							<view class="flex-row justify-center items-center score-btn">
								<text class="font_2 text_2">{{score}}</text>
								<image class="score-img" src="https://terminator.axu9.com/images/min-jifen-text.png" />
							</view>
						</view> -->


					</view>
					<view class="score-center flex-row items-center">
						<view class="score flex-1 flex-row">
							<image class="jifen-img" :src="commonData.mineData.jifenNewIcon"
								mode=""></image>
							<view class="flex-col">
								<text class="jifen-text">积分</text>
								<text class="jifen-num">{{score}}</text>
							</view>
						</view>
						<image class="line-img" src="https://terminator.axu9.com/images/line-member.png" mode="">
						</image>
						<view class="score flex-1 flex-row">
							<image class="jifen-img" :src="commonData.mineData.gonggaoNewIcon"
								mode=""></image>
							<view class="flex-col">
								<text class="jifen-text">音色个数</text>
								<text class="jifen-num">{{timbreList.length}}</text>
							</view>
						</view>
						<view v-if="level == 1 || level == 2 || level == 3" @click="openPage" class="flex-1 flex-row justify-end"
							>
							<view class="huiyuan flex-row items-center justify-center">
								<text class="huiyuan-text">开通会员</text>
								<image class="arrow-right-img" src="https://terminator.axu9.com/images/kthy-right.png"
									mode=""></image>

							</view>
						</view>

					</view>

					
				</view>
				<view class="option-mine-wrap flex-row justify-center">
					<view class="option-mine flex-row items-center">
						<view @click="duihuan" class="dui-btn flex-1 flex-col items-center justify-center">
							<view class="dui-btn-top flex-row items-end">
								<image class="dui-btn-img" src="https://terminator.axu9.com/images/dhm-icon.png"
									mode=""></image>
							</view>
							<text class="dui-btn-text">兑换码</text>
						</view>
						<view @click="toExchange" class="dui-btn flex-1 flex-col items-center justify-center">
							<view class="dui-btn-top flex-row items-end">
								<image class="jifen-btn-img" src="https://terminator.axu9.com/images/jfjl-icon.png"
									mode=""></image>
							</view>
							<text class="dui-btn-text">积分记录</text>
						</view>
						<!-- v-if="level == 2 || level == 3" -->
						<view @click="toPurchaser" v-if="level == 2 || level == 3"
							class="dui-btn flex-1 flex-col items-center justify-center">
							<view class="dui-btn-top flex-row items-end">
								<image class="shou-btn-img" src="https://terminator.axu9.com/images/sqfws-icon.png"
									mode=""></image>
							</view>
							<text class="dui-btn-text">授权服务商</text>
						</view>
						<!-- <view @click="toMore" class="dui-btn flex-1 flex-col items-center justify-center">
							<view class="dui-btn-top flex-row items-end">
								<image class="more-btn-img" src="https://terminator.axu9.com/images/more-icon.png"
									mode=""></image>
							</view>
							<text class="dui-btn-text">更多</text>
						</view> -->
						<!-- 客服 -->
						<!-- <view class="dui-btn flex-1">
							<button open-type="contact" class="kefu-btn">
								<view @click="toMore" class="dui-btn flex-1 flex-col items-center justify-center">
									<view class="dui-btn-top flex-row items-end">
										<image class="more-btn-img" src="https://terminator.axu9.com/images/more-icon.png"
											mode=""></image>
									</view>
									<text class="dui-btn-text">客服</text>
								</view>
							</button>
						</view> -->


					</view>
				</view>

				<view class="mt-20 flex-col items-center">
					<view class="flex-col">
						<view class="flex-row self-stretch group_6">
							<text class="font_4" @click="changeType(index)" :class="current == index ? 'active' : ''"
								v-for="(item,index) in tabs" :key="index">{{item}}</text>
							<!-- <text class="font_4 text_9 ml-90-5">{{item}}</text> -->
						</view>
						<!-- <view class="self-start section_2"></view> -->
					</view>
					<view class="flex-row equal-division" v-if="current == 0">
						<view class="flex-col group_7 equal-division-item" v-for="(item,index) in videoList"
							:key="index">
							<view class="flex-col justify-start self-stretch section_4 relative">
								<view class="options flex-col">
									<image @click="delVideoModel(item.id)" class="image_4"
										src="https://terminator.axu9.com/images/del-icon.png" />
									<!-- <image v-if="item.status == 1" @click="downloadVideo(item.videoUrl,item.title)"
										class="image_4 mt-10-5"
										src="https://terminator.axu9.com/images/download-icon.png" /> -->
										<image v-if="item.status == 1 && item.is_qiniu == 1" @click="downloadVideo(item.videoUrl,item.title)"
											class="image_4 mt-10-5"
											src="https://terminator.axu9.com/images/download-icon.png" />
										<view @click="clickLoadding" v-if="item.status == 1 && item.is_qiniu != 1" class="huancun-icon mt-10-5 flex-row justify-center items-center">
											<image
												 class="img-huancun"
												src="https://terminator.axu9.com/images/huancunzhong.gif" />
										</view>
								</view>
								<view class="flex-col section_3 items-center justify-center" v-if="item.status == 0" :style="{backgroundImage: 'url(' + commonData.mineData.mineVideoPoster +')'}">
									<text class="self-center text_10">视频生成中</text>
									<view class="flex-col justify-center items-start section_6">
										<image class="hecheng-loading-img"
											src="https://terminator.axu9.com/images/hecheng-loading.gif" mode="">
										</image>
									</view>
								</view>
								<view class="flex-col section_3 items-center justify-center" v-if="item.status == 2" :style="{backgroundImage: 'url(' + commonData.mineData.mineVideoPoster +')'}">
									<text class="self-center text_10">视频生成失败</text>
								</view>
								<view class="" v-if="item.status == 1">

									<video :src="item.videoUrl" play-strategy="1" object-fit="cover"
										class="video-poster" :vslide-gesture-in-fullscreen="false"></video>
								</view>
								<!-- <view class="options flex-col">
									<image @click="delVideoModel(item.id)" class="image_4"
										src="https://terminator.axu9.com/images/del-icon.png" />
									<image v-if="item.status != 2 && item.is_qiniu == 1"
										@click="downloadVideo(item.videoUrl,item.title)" class="image_4 mt-10-5"
										src="https://terminator.axu9.com/images/download-icon.png" />
								</view>
								<view class="flex-col section_3 items-center justify-center" v-if="item.status == 2">
									<text class="self-center text_10">视频生成失败</text>
								</view>

								<view class="" v-else>
									<view class="flex-col section_3 items-center justify-center"
										v-if="item.is_qiniu == 0 || item.is_qiniu == 2">
										<text class="self-center text_10">视频生成中</text>
										<view class="flex-col justify-center items-start section_6">
											<image class="hecheng-loading-img"
												src="https://terminator.axu9.com/images/hecheng-loading.gif" mode="">
											</image>
										</view>
									</view>

									<view class="" v-if="item.is_qiniu == 1">

										<video :src="item.videoUrl" play-strategy="1" object-fit="cover"
											class="video-poster" :vslide-gesture-in-fullscreen="false"></video>
									</view>

								</view> -->

							</view>
							<view @click="toDetail(item)" class="flex-row items-center" style="min-height: 80rpx;">
								<text class="self-start font_5 text_12 mt-12-5" v-if="item.disabled"
									style="max-width: 80%;">{{item.title}}</text>
								<input class="self-start font_5 text_12 mt-12-5"
									@click.stop="inputVideoTitle(item.id,index)" v-else type="text" v-model="item.title"
									@blur="inputVideoTitleBlur($event,item.id)" />
								<!-- <image @click.stop="editVideoTitle(index)" v-if="item.status != 2 && item.is_qiniu == 1"
									class="edit-title-img"
									src="https://terminator.axu9.com/images/edit-video-title.png" /> -->
								<image @click.stop="editVideoTitle(index)"
									v-if="item.videoUrl != null && item.is_qiniu == 1" class="edit-title-img"
									src="https://terminator.axu9.com/images/edit-video-title.png" />
							</view>
							<!-- <text class="self-start font_5 text_12 mt-12-5">{{item.title}}</text> -->
						</view>
					</view>
					<view class="flex-col items-center" v-if="current == 1">
						<!-- 添加音色 开始 -->
						<!-- <view @click="toAddAudio" class="add-voice flex-row items-center justify-center">
							<image class="add-voice-img" src="https://terminator.axu9.com/images/add-bg-white-icon.png"
								mode=""></image>
							<text class="add-voice-text">创造你的声音</text>
						</view> -->
						<!-- 添加音色 结束 -->
						<!-- <view class="clone-num">
							剩余克隆次数：{{shengyuNum}}
						</view> -->
						<view class="voice-list">
							<view class=" flex-row justify-between items-center"
								:class="item.mp3 != null ? 'voice-list-item' : 'voice-list-item1'"
								v-for="(item,index) in timbreList" :key="index" @click="audioClick(index,item)">

								<view class=" flex-1 flex-row items-center"
									:class="item.mp3 != null ? 'voice-list-item-lf' : 'voice-list-item-lf1'">
									<text v-if="item.disabled" style="max-width: 80%;">{{item.title}}</text>
									<input @click.stop="inputTitle(item.id,index)" v-else type="text"
										v-model="item.title" @blur="inputTitleBlur($event,item.id)" />
									<image @click.stop="editTitle(index)" v-if="item.mp3 != null" class="edit-title-img"
										:src="commonData.mineData.editItemIcon" />
								</view>
								<!-- <image v-if="audioIndex == index" class="image_55"
									src="https://terminator.axu9.com/images/playing.gif" /> -->
								<view class="edit-num" v-if="item.mp3 != null">
									剩余训练次数{{item.update_num}}次
								</view>
								<view class="flex-row justify-between">

									<!-- <view class="flex-row">
										<image @click.stop="editClick(item.id,item.title)" class="image_opt"
											src="../../static/image/other/edit-audio-icon.png" />
									</view> -->
									<view v-if="item.mp3 != null" class="edit-btn flex-row items-center justify-center"
										@click.stop="editClick(item.id,item.title,1)">
										<!-- @click.stop="editClick(item.id,item.title,1,item.update_num)" -->
										<image class="image_edit" :src="commonData.mineData.editTitleItemIcon" />
										<text class="text_edit">修改</text>
									</view>
									<view v-else class="upload-btn flex-row items-center justify-center"
										@click.stop="editClick(item.id,item.title,2)">
										<image class="image_upload" :src="commonData.mineData.uploadItemIcon" />
										<text class="text_upload">上传</text>
									</view>
								</view>

							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- <view class="invite" v-if="userId != ''">
				<image @click="toinvite" class="invite-img" src="https://terminator.axu9.com/images/invite-icon.png" mode=""></image>
			</view> -->
		</view>
		<!-- 登录弹窗 -->
		<ns-login ref="login" @loginSuccess="loginSuccess"></ns-login>
		<!-- 绑定手机号弹窗 -->
		<bind-phone ref="bindPhone" @bindSuccess="bindSuccess"></bind-phone>

		<!-- 修改音色标题弹窗 -->
		<edit-title ref="editTitle" :audioTitle="timbreTitle" @editSuccess="editSuccess"></edit-title>

		<!-- 上传音色选项弹窗 -->
		<audio-option ref="audioOption" @clickOption="clickOption"></audio-option>

		<!-- 添加音色标题弹窗 -->
		<audioTitlePop ref="audiotitle" @submit="submit" :isLoading="isLoading"></audioTitlePop>

		<!-- 兑换码弹窗 -->
		<duihuanPop ref="duihuan" @submit="duihuanSubmit"></duihuanPop>

		<!-- 修改音色提示弹窗 -->
		<changeTimbrePop ref="changeTimbre" @submit="changeTimbreSubmit"></changeTimbrePop>

		<!-- 下载视频进度条弹窗 -->
		<progressPop ref="progressPop" :isShow="false" :percent="percent" @cancel="showProgressCancel"></progressPop>

		<!-- 激活码协议弹窗 -->
		<activeCodeAgreePop ref="activeCodeAgree" @submit="activeCodeAgreeSubmit"></activeCodeAgreePop>
	</view>

</template>

<script>
	import commonData from '@/common/js/data.js';
	import nsLogin from "../../components/ns-login/ns-login.vue";
	import bindPhone from "../../components/bindPhone/index.vue";
	import editTitle from "../../components/editTitlePop/index.vue";
	import audioOption from "../../components/audioOption/index.vue";
	import audioTitlePop from "../../components/audioTitlePop/index.vue";
	import duihuanPop from "../../components/duihuanPop/index.vue";
	import changeTimbrePop from "../../components/changeTimbrePop/index.vue";
	import progressPop from "../../components/progressPop/index.vue";
	import activeCodeAgreePop from "../../components/activeCodeAgreePop/index.vue";
	import {
		getAudioPage,
		checkUserInfo,
		getUserinfo,
		delAudio,
		getService,
		useActivationcode
	} from "@/api/user.js"
	import {
		getVideoAnimate,
		updateVideoTitle
	} from "@/api/video.js"
	import {
		getTimbre,
		updateTimbre,
		delTimbre,
		myYinseFileup
	} from "@/api/audio.js"
	// const innerAudioContext = uni.createInnerAudioContext();
	// innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				statusShow: false, //查看视频上传状态弹窗
				uploadStatus: '', //视频上传状态

				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],


				avatar: '', //头像
				nickname: '微信用户',
				serviceName: '', //服务商名称
				address: '', //服务商地址
				tel: '', //服务商电话
				score: 0, //分数
				timbreList: [], //我的音色列表
				videoList: [
					// {
					// 	videoUrl: 'https://s3.amazonaws.com/pt-resource-new/algorithm/2024-08-16/f8083d173ad176c2.mp4',
					// 	status: 1,
					// 	title: '111'
					// }
				], //我的合成视频列表
				tabs: [
					'作品', '音色'
				],
				current: 0,
				videoListid: 0, //删除视频的列表id
				// playIndex: 0,//
				audioIndex: -1, //播放的index
				innerAudioContext: null,
				playIndex: -1, //点击的index
				phoneNum: '', //授权手机号
				level: 0, //身份 0普通用户 1激活用户 2银牌 3金牌
				mobile: '', //手机号
				audioTitle: '', //添加音色标题
				audioUrl: '', //音频路径
				timbreTitle: '', //修改音色标题
				timbreId: '', //修改音色id
				shengyuNum: 0, //剩余克隆次数
				isLoading: false, //是否加载中
				isLoadingDui: false, //兑换码是否加载中
				inputIndex: 0, //音频标题编辑index
				inputId: 0, //音频标题编辑id
				inputVideoIndex: 0, //视频标题编辑index
				inputVideoId: 0, //视频标题编辑index
				// posterUrl: 'https://terminator.axu9.com/images/mine-video-poster.png',
				posterUrl: '',
				userId: '', //用户id
				timer: null, //定时器--查看生成音频状态
				page: 1, //视频列表分页
				totalPage: 1,
				percent: 0, //下载进度条
				downloadTask: null, //上传视频任务
				duihuanCode: '', //兑换码
				activeCodeAgreeLoading: false, //激活码协议弹窗
				commonData: {}
			}
		},
		components: {
			nsLogin,
			bindPhone,
			editTitle,
			audioOption,
			audioTitlePop,
			duihuanPop,
			changeTimbrePop,
			progressPop,
			activeCodeAgreePop
		},
		onLoad(options) {
			this.current = options.current ? options.current : 0
			if (JSON.stringify(options) != '{}' && options.id) {
				console.log('走了么')
				uni.setStorageSync("parentId", options.id)
			}
		},
		onShow() {
			// this.$refs.changeTimbre.open();
			this.commonData = commonData;
			if (!uni.getStorageSync("userId")) {
				uni.hideShareMenu({
					menus: ['shareAppMessage']
				})
			} else {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				})
			}
			if (!uni.getStorageSync('userId')) {
				this.$refs.login.open()
				return
			}


			this.videoList = [];
			this.page = 1;
			this.getVideoAiduo();
			// this.timer = setInterval(()=>{
			// 	this.getVideoAiduo();
			// },1000)

			this.getTimbreList();
			this.getUserinfo();
			this.posterUrl = this.commonData.mineData.mineVideoPoster;
			this.contextInit();
			
		},
		onShareAppMessage: function(res) {
			let userId = uni.getStorageSync("userId") ? uni.getStorageSync("userId") : ''
			return {
				title: '我的', // 分享标题  
				path: '/pages/mine/index?id=' + userId, // 分享路径，可以带参数  
				success: function(res) {
					// 设置成功  
				},
				fail: function(res) {
					// 设置失败  
				}
			}
		},
		// onShareTimeline() {}, //分享朋友圈
		created() {
			// this.contextInit();
		},
		onHide() {
			console.log('kkkkk')
			this.$refs.login.close();
			this.$refs.audioOption.close();
			this.audioIndex = -1;
			if (this.innerAudioContext) {
				this.innerAudioContext.stop();
				this.innerAudioContext.destroy();
				this.innerAudioContext = null;
			}
			// if(this.timer){
			// 	clearInterval(this.timer)
			// }

		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉')
			this.videoList = [];
			this.page = 1;
			this.getVideoAiduo();
			this.getTimbreList();
			uni.stopPullDownRefresh(); //停止刷新
		},
		onReachBottom() {
			console.log('走了么')
			if (this.page < this.totalPage) {
				this.page++;
				this.getVideoAiduo();
			} else {
				uni.showToast({
					title: '已加载全部',
					icon: 'none'
				})
			}
		},

		// beforeDestroy() {
		// 	console.log('离开')
		// 	this.innerAudioContext.destroy();
		// },
		methods: {
			// 跳转到开通会员页面
			openPage() {
				uni.navigateTo({
					url: '/pagesMine/openMembership/index'
				})
			},
			// 跳转到海报页面
			toinvite() {
				uni.navigateTo({
					url: '/pagesMine/poster/index?uid=' + this.userId
				})
			},
			// 兑换记录
			toExchange() {
				// uni.showToast({
				// 	title: '开发中',
				// 	icon: 'none'
				// })
				uni.navigateTo({
					url: '/pagesMine/exchangeRecords/index'
				})
			},
			// 兑换码
			duihuan() {
				// uni.showToast({
				// 	title: '开发中',
				// 	icon: 'none'
				// })
				this.$refs.duihuan.open();
			},
			// 更多
			toMore() {
				uni.showToast({
					title: '开发中',
					icon: 'none'
				})
			},
			getPurchase() {
				getService().then(res => {
					console.log(res, 'gg');
					if (res.errno == 0) {
						this.serviceName = res.data.store_company_name;
						this.address = res.data.store_company_address;
						this.tel = res.data.store_company_tel;
					}


				}).catch(err => {

				})
			},
			// 跳转到采购商
			toPurchaser() {
				// uni.showToast({
				// 	title: '开发中',
				// 	icon: 'none'
				// })
				// 验证代理商信息
				checkUserInfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res, 'checkUserInfo')
					if (res.errno == 0) {
						uni.navigateTo({
							url: '/pagesMine/purchaser/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				}).catch(err => {

				})

			},

			contextInit() {
				let that = this;
				var innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = false;

				innerAudioContext.loop = false;
				innerAudioContext.onPlay(() => {
					that.audioIndex = that.playIndex;
					console.log('开始播放', that.audioIndex);
				});
				innerAudioContext.onStop(() => {
					that.audioIndex = -1;
					console.log('结束播放', that.audioIndex);
				});
				innerAudioContext.onPause(() => {
					that.audioIndex = -1;
					console.log('暂停播放');
				});
				innerAudioContext.onTimeUpdate(function() {


				});
				innerAudioContext.onEnded(function() {
					that.audioIndex = -1;

					console.log('暂停播放');
				});

				innerAudioContext.onError((res) => {
					console.log(res, '错误')
					// uni.showToast({
					// 	title: '音频播放错误',
					// 	icon: 'none'
					// })
				});
				innerAudioContext.onStop((res) => {
					console.log(res, 'onStop')
					that.audioIndex = -1;

				});
				that.innerAudioContext = innerAudioContext
			},
			// // 播放音频
			// playAudio(index, item) {
			// 	console.log(index, item.mp3, 'llllll')
			// 	uni.showLoading({
			// 		title: '加载音频中',
			// 		icon: 'none'
			// 	})
			// 	this.playIndex = index;
			// 	console.log(this.playIndex, this.audioIndex, '/////')
			// 	this.innerAudioContext.src = item.mp3;
			// 	this.innerAudioContext.play()
			// },
			// pauseAudio(index, item) {
			// 	this.innerAudioContext.pause()
			// },
			inputTitle(id, index) {
				console.log(id, index, '编辑')
				this.inputIndex = index;
				this.inputId = id;

			},
			inputTitleBlur(e, id) {
				console.log(e, id, 'blur')
				let title = e.detail.value;
				if (title == '') {
					uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					})
					this.getTimbreList();
					return
				}
				uni.showLoading({
					title: '修改中'
				})
				updateTimbre({
					id: id,
					title: title
				}).then(res => {
					uni.hideLoading();
					if (res.errno == 0) {
						uni.showToast({
							title: '修改成功',
							icon: "none",
							duration: 1000
						})
						this.getTimbreList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					ni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})

			},
			editTitle(index) {
				this.timbreList[index].disabled = false;
			},
			inputVideoTitle(id, index) {
				console.log(id, index, '编辑')
				this.inputVideoIndex = index;
				this.inputVideoId = id;

			},
			inputVideoTitleBlur(e, id) {
				console.log(e, id, 'blur')
				let title = e.detail.value;
				if (title == '') {
					uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					})
					this.videoList = [];
					this.page = 1;
					this.getVideoAiduo();
					return
				}
				// this.getVideoAiduo();
				uni.showLoading({
					title: '修改中'
				})
				updateVideoTitle({
					id: id,
					title: title
				}).then(res => {
					uni.hideLoading();
					if (res.errno == 0) {
						uni.showToast({
							title: '修改成功',
							icon: "none",
							duration: 1000
						})
						this.videoList = [];
						this.page = 1;
						this.getVideoAiduo();
						// this.timer = setInterval(()=>{
						// 	this.getVideoAiduo();
						// },1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					ni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})

			},
			// 修改视频标题--改变标题状态
			editVideoTitle(index) {
				// if(this.timer){
				// 	clearInterval(this.timer)
				// }
				this.videoList[index].disabled = false;
			},
			// 跳转到视频详情页
			toDetail(item) {
				// console.log(item, 'item')
				// if(item.status != 2 && item.is_qiniu == 1){
				// 	uni.navigateTo({
				// 		url: '/pagesMine/videoDetail/index?originalVideoUrl=' + item.originalVideoUrl + '&videoUrl=' +
				// 			item.videoUrl
				// 	})
				// }
				if (item.videoUrl) {
					uni.navigateTo({
						url: '/pagesMine/videoDetail/index?originalVideoUrl=' + item.originalVideoUrl +
							'&videoUrl=' +
							item.videoUrl
					})
				}


			},
			audioClick(index, item) {
				// console.log(item.mp3, 'llllllll')
				if (item.mp3 == null) {
					return
				}
				this.timbreUrl = item.mp3;
				this.timbreId = item.id;
				this.timbreType = item.type;
				// console.log(index, item.isClick, this.innerAudioContext.paused, '点击音频qqqqqq')
				var arr = this.timbreList.map((items, indexs) => {
					return {
						...items,
						isClick: index == indexs ? true : false,
						disabled: true
					}
				})
				this.timbreList = arr;
				if (!item.isClick) {
					// this.playIndex = -1;
					// this.innerAudioContext.src = '';
					this.innerAudioContext.stop();
					this.playIndex = index; //播放的音频的下标
					this.innerAudioContext.src = item.mp3;
					this.innerAudioContext.play()
				} else {
					if (this.innerAudioContext.paused) {
						this.playIndex = index; //播放的音频的下标
						this.innerAudioContext.src = item.mp3;
						this.innerAudioContext.play()
					} else {
						this.innerAudioContext.pause()
						// this.innerAudioContext.stop();
					}
				}


			},
			delVideoModel(id) {
				this.videoListid = id;
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该视频么？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.delVideo();
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			},
			showProgressCancel() {
				// console.log('关闭上传弹窗')
				// this.downloadTask.abort();
				// this.downloadTask = null;
				this.$refs.progressPop.close();

			},
			// 删除音色接口
			delMineTimbre() {
				// console.log('删除音色')
				uni.showLoading({
					title: '删除中'
				})
				delTimbre({
					id: this.timbreId,
				}).then(res => {
					uni.hideLoading();
					if (res.errno == 0) {
						this.getTimbreList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			// 删除 音频 视频
			delVideo() {

				uni.showLoading({
					title: '删除中'
				})
				delAudio({
					id: this.videoListid,
					type: this.current
				}).then(res => {
					uni.hideLoading();
					if (res.errno == 0) {
						this.videoList = [];
						this.page = 1;
						this.getVideoAiduo();
					}

				}).catch(err => {
					uni.hideLoading();
				})
			},
			downloadVideoAuthSuccess(url, fileName) {
				var _this = this;
				uni.showLoading({
					title: '下载中'
				})
				_this.downloadTask = uni.downloadFile({
					url: url,
					success: function(res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						// console.log(res, 'reeeeee')
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading()
								uni.showToast({
									title: "保存成功",
									duration: 2000,
								})
								setTimeout(() => {
									_this.$refs.progressPop.close();
									_this.percent = 0;
								}, 1000)
							},
							fail() {
								uni.showToast({
									title: "保存失败",
									icon: 'none',
									duration: 2000,
								})
								_this.$refs.progressPop.close();
								_this.percent = 0;
							}
						})
					},
					fail: function(err) {
						uni.hideLoading();
						// console.log(err, 'errr')
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						})
						_this.$refs.progressPop.close();
					}
				})


				_this.downloadTask.onProgressUpdate((res) => {

					if (res.progress > 0) {
						uni.hideLoading();
						_this.$refs.progressPop.open();
					}
					// if(_this.percent == 10){
					// 	console.log('走了么')
					// 	_this.downloadTask.abort();
					// 	_this.downloadTask = null;
					// }
					_this.percent = res.progress;
					if (_this.percent >= 100) {

						// setTimeout(() => {
						// 	_this.$refs.progressPop.close();
						// 	_this.percent = 0;
						// }, 1000)


					}
					// console.log('下载进度：' + res.progress);
					// console.log('已下载长度：' + res.totalBytesWritten);
					// console.log('文件总长度：' + res.totalBytesExpectedToWrite);
				})

			},
			// 点击未上传到七牛图标
			clickLoadding(){
				uni.showToast({
					title: '缓存中',
					icon: 'none'
				})
			},
			// 下载视频
			downloadVideo(url, fileName) {
				this.$isAuthorize('scope.writePhotosAlbum', {
					title: '保存视频权限',
					content: '为了将视频保存到您的相册，我们需要获取相应的存储权限。请允许我们访问您的存储，以便我们能够正确保存视频。'
				}).then(res => {
					console.log(res, '授权')
					if (res == true) {
						// 已授权
						console.log('已授权')
						// recorderManager.start();
						this.downloadVideoAuthSuccess(url, fileName)
					} else {
						// 未授权打开授权
						console.log('未授权')
					}
				})

			},
			// 查看视频状态
			viewVideoStatus(videoId) {

				getVideoAnimate({
					video_id: videoId
				}).then(res => {
					// console.log(res, 'getVideoAnimate')
					this.statusShow = true;
					this.uploadStatus = res.data.status;
				})
			},
			// 编辑音色标题
			editClick(id, title, type) {
				// console.log()
				this.timbreTitle = title;
				this.timbreId = id;
				// console.log(this.audioTitle, '1111')
				if (type == 1) {
					this.$refs.changeTimbre.open();
					return
				}
				// this.$refs.editTitle.open();
				uni.navigateTo({
					url: '/pagesMine/editTimbre/index?id=' + this.timbreId
				})
			},
			// 删除音色
			delClick(id) {
				this.timbreId = id;
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该音频么？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.delMineTimbre();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			actionClick(index, index1) {
				// console.log(index, index1, '11111')
				if (index1 == 0) {
					this.videoListid = this.voiceList[index].id;
					var _this = this;
					uni.showModal({
						title: '提示',
						content: '确定删除该音频么？',
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								_this.delVideo();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					// this.list.splice(index, 1);
					// this.$u.toast(`删除了第${index}个cell`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},

			// 获取音色列表
			getTimbreList() {
				getTimbre({
					uid: uni.getStorageSync("userId"),
					type: 2, //0 全部 1系统  2我的
				}).then(res => {
					console.log(res.data, '获取音色列表')
					var arr = res.data.map(item => {
						return {
							...item,
							isClick: false,
							disabled: true
						}
					})
					this.timbreList = arr;
				}).catch(err => {

				})
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'getUserinfo')
					this.avatar = res.data.avatarUrl;
					this.nickname = res.data.nickName;
					this.score = res.data.integral;
					this.level = res.data.level_id;
					this.mobile = res.data.mobile;
					this.shengyuNum = res.data.yinse_num;
					this.userId = res.data.id;
					uni.setStorageSync('mobile', res.data.mobile);
				}).catch(err => {

				})
			},
			// 验证会员信息
			checkUserInfo() {
				checkUserInfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'checkUserInfo')

				}).catch(err => {

				})
			},
			// 获取音频 视频列表
			getVideoAiduo() {

				// var _this = this;
				getAudioPage({
					uid: uni.getStorageSync("userId"),
					type: this.current,
					page: this.page
				}).then(res => {
					this.totalPage = res.data.last_page;
					// console.log(res.data, 'resssss')
					var arr = res.data.data.map((items, indexs) => {
						return {
							...items,
							disabled: true
						}
					})
					// this.videoList = arr;
					this.videoList = [...this.videoList, ...arr];
				}).catch(err => {

				})
			},
			// // 获取视频列表
			// getVideo(){
			// 	audioList({
			// 		uid: uni.getStorageSync("userId")
			// 	}).then(res => {

			// 	}).catch(err => {

			// 	})
			// },
			changeType(index) {
				this.current = index;
				if (index == 0) {
					this.videoList = [];
					this.page = 1;
					this.getVideoAiduo();
				} else {
					// this.getVideoAiduo();
					this.getTimbreList();
				}

			},
			toAddAudio() {
				this.$refs.audioOption.open();
				// uni.navigateTo({
				// 	url: '/pagesCreate/addAudio/index?toAddType=1'
				// })
			},
			openBindPhone() {
				this.$refs.bindPhone.open();
			},
			loginSuccess() {
				console.log('登录成功')
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				})
				if (uni.getStorageSync("mobile") == '') {
					// console.log('111')
					this.$refs.bindPhone.open();
				}
				if (this.innerAudioContext) {
					this.innerAudioContext.stop();
					this.innerAudioContext.destroy();
				}
				if (!this.innerAudioContext) {
					this.contextInit();
				}
				this.videoList = [];
				this.page = 1;
				this.getVideoAiduo();
				this.getTimbreList();
				// this.checkUserInfo();
				this.getUserinfo();
				// this.getPurchase();
			},
			// 绑定手机号
			bindSuccess() {
				if (this.innerAudioContext) {
					this.innerAudioContext.stop();
					this.innerAudioContext.destroy();
				}
				if (!this.innerAudioContext) {
					this.contextInit();
				}
				// console.log('绑定手机号成功')
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				})
				this.videoList = [];
				this.page = 1;
				this.getVideoAiduo();
				this.getTimbreList();
				this.getUserinfo();
				// this.getPurchase();
			},
			// 修改标题
			editSuccess(data) {
				console.log(data, 'editSuccess')
				this.timbreTitle = data;
				uni.showLoading({
					title: '修改中'
				})
				updateTimbre({
					id: this.timbreId,
					title: this.timbreTitle
				}).then(res => {
					uni.hideLoading();
					if (res.errno == 0) {
						this.$refs.editTitle.close();
						this.timbreTitle = '';
						this.timbreId = '';
						this.getTimbreList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					ni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			// 添加音色弹窗选择
			clickOption(data) {
				console.log(data, 'aaaaa')
				if (data == 0) {
					uni.navigateTo({
						url: '/pagesCreate/addAudio/index?toAddType=1'
					})
				} else if (data == 2) {
					// #ifdef MP
					var _this = this;
					wx.chooseMessageFile({
						count: 1, // 默认99
						type: 'file', // 选择文件的类型
						extension: ['mp3', 'm4a', 'amr', 'wav', 'aac', 'MP3', 'M4A', 'AMR', 'WAV','AAC'], // 选择文件的扩展名
						// extension: ['.m﻿4a', '.mp3'],
						success: function(res) {
							const filePath = res.tempFiles[0].path; // 获取音频文件的临时路径
							// const fileName = res.tempFiles[0].name;
							console.log(res, 'res')
							_this.uploadAudio(filePath);

						}
					});
					// #endif
					// this.$refs.audiotitle.open();
				}
			},
			uploadAudio(filePath, fileName) {
				var _this = this;
				_this.$upload(filePath).then(res => {
					console.log(res, 'uploadImg')
					if (res.data.errno == 1) {
						_this.audioUrl = res.data.img
						// _this.audioName = fileName
						console.log(_this.audioUrl, '上传音频')
						// _this.showPop1 = true;
						_this.$refs.audioOption.close();
						_this.$refs.audiotitle.open();
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}


				}).catch(err => {
					console.log(err, 'err')

				})
			},
			// 输入标题--确定
			submit(data) {
				console.log(data, 'submit')
				this.audioTitle = data
				uni.showLoading({
					title: '上传中'
				})
				this.isLoading = true;
				myYinseFileup({
					uid: uni.getStorageSync("userId"),
					title: this.audioTitle,
					mp3: this.audioUrl
				}).then(res => {
					console.log(res, 'ressss')
					this.isLoading = false;
					uni.hideLoading();
					if (res.errno == 0) {
						console.log(this.videoPath, 'this.videoPath')
						this.$refs.audiotitle.close();
						this.getTimbreList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.isLoading = false;
					uni.hideLoading();
					console.log(err, 'err')
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			// 修改音色提示弹窗确定
			changeTimbreSubmit() {
				this.$refs.changeTimbre.close()
				uni.navigateTo({
					url: '/pagesMine/editTimbre/index?id=' + this.timbreId
				})
			},
			duihuanSubmit(data) {
				this.$refs.activeCodeAgree.open();
				this.duihuanCode = data;
			},
			// 激活码协议弹窗
			activeCodeAgreeSubmit() {
				this.duihuanSubmitJie(this.duihuanCode)
			},
			// 兑换码--确定
			duihuanSubmitJie(data) {
				console.log(this.activeCodeAgreeLoading, 'this.isLoadingDui')
				if (this.activeCodeAgreeLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				console.log(data, '兑换码')
				this.activeCodeAgreeLoading = true;
				useActivationcode({
					uid: uni.getStorageSync("userId"),
					code: data
				}).then(res => {
					this.activeCodeAgreeLoading = false;
					if (res.errno == 0) {
						uni.showToast({
							title: '激活成功',
							icon: 'none'
						})
						this.$refs.duihuan.close();
						this.$refs.activeCodeAgree.close();
						this.getUserinfo();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.$refs.activeCodeAgree.close();
					}
				}).catch(err => {
					this.activeCodeAgreeLoading = false;
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);

	/* page {
		background-color: #fff;
		background-image: url('https://terminator.axu9.com/images/mine-top-bg.png');
		background-size: 100% 717rpx;
		background-repeat: no-repeat;
	} */
</style>


<style lang="scss" scoped>
	.page {
		background-color: #fff;
		// background-image: url('https://terminator.axu9.com/images/mine-top-bg.png');
		background-size: 100% 717rpx;
		background-repeat: no-repeat;
	}

	input {
		// width: max-content;
		// padding: 4px 8px;
		// border: 1px solid #ccc;
		// border-radius: 4px;
		width: auto;
		max-width: 100%;
	}

	.item {
		display: flex;
		padding: 20rpx;
	}

	.image11 {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.ml-13-5 {
		margin-left: 27rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}



	.ml-90-5 {
		margin-left: 181rpx;
	}

	.mt-12-5 {
		margin-top: 25rpx;
	}

	.mt-10-5 {
		margin-top: 21rpx;
	}

	.mt-6-5 {
		margin-top: 13rpx;
	}

	.mt-5 {
		margin-top: 10rpx;
	}

	.mb-11 {
		margin-bottom: 11rpx;
	}

	.page {
		/* padding-top: 35rpx;
	  background-color: #ffffff;
	  height: 100%;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden; */
	}

	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.font {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		font-weight: 500;
		color: #111111;
		/* width: 200rpx; */
		width: 500rpx;
		height: 34rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text {
		margin-top: 46rpx;
	}

	.group {
		/* margin: 57rpx 0 -34rpx; */
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.group_3 {
		padding: 0 8rpx 25rpx;
	}

	.avatar-wrap {
		width: 138rpx;
		height: 138rpx;
		background: #ffffff;
		box-shadow: 0 0 38rpx 11rpx #bebebe1a;
		border-radius: 50%;
	}

	.image_2 {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
	}

	.text_3 {
		color: #999999;
	}

	.user-level-img {
		width: 35rpx;
		height: 37rpx;
	}

	.user-level-btn {
		/* margin-left: 7rpx; */
		/* padding: 0 7rpx; */
		background-image: linear-gradient(100deg, #2d94fd 0%, #baf7fc 100%);
		border-radius: 16rpx;
		width: 118rpx;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-top: 20rpx;
		margin-left: -6rpx;
		/* line-height: 17rpx; */

	}

	.user-level-btn-yin {
		background-image: url('https://terminator.axu9.com/images/yinpai-icon-blue.png');
		width: 101rpx;
		height: 37rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 20rpx;
		margin-top: 21rpx;
	}

	.user-level-btn-jin {
		background-image: url('https://terminator.axu9.com/images/jinpai-icon.png');
		width: 101rpx;
		height: 37rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 20rpx;
		margin-top: 21rpx;
	}

	.score-btn {
		/* padding: 14rpx 0;
		background-image: linear-gradient(90deg, #00c959 0%, #19d5b5 100%);
		box-shadow: 0rpx 8rpx 8rpx 1rpx #04c05721;
		border-radius: 26rpx;
		height: 52rpx; */
		background-image: url('https://terminator.axu9.com/images/mine-jifen-bg1.png');
		width: 252rpx;
		padding: 10rpx;
		min-height: 112rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.score-img {
		width: 58rpx;
		height: 24rpx;
		margin-left: 21rpx;
	}

	.text-wrapper {
		/* margin-top: 16rpx; */
		padding: 14rpx 0;
		background-image: linear-gradient(88deg, #0153ab 0%, #33c5d8 34%, #00c959 86%, #00c959 100%);
		border-radius: 26rpx;
		width: 148rpx;
		height: 52rpx;
	}

	.text_2 {
		font-weight: 600;
		font-size: 38rpx;
		color: #111111;
		max-width: 70%;
		word-break: break-all;
		text-align: center;
		line-height: 38rpx;
	}

	.score-center {
		padding: 22rpx 23rpx 33rpx 42rpx;
		background-image: linear-gradient(82deg, $mine-huiyuan-bg-color-lf 0%, $mine-huiyuan-bg-color-md 52%, $mine-huiyuan-bg-color-rg 100%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.huiyuan {
		width: 146rpx;
		height: 46rpx;
		background-color: $red-color;
		border-radius: 30rpx;
		// background-image: url("https://terminator.axu9.com/images/kthy-bg.png");
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}

	.huiyuan-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #fff;
	}

	.arrow-right-img {
		width: 9rpx;
		height: 16rpx;
		margin-left: 10rpx;
	}

	.line-img {
		width: 2rpx;
		height: 70rpx;
		margin: 0 20rpx;
	}

	.jifen-img {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
	}

	.jifen-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: $white-color;
		margin-bottom: 8rpx;
	}

	.jifen-num {
		font-size: 26rpx;
		font-family: PingFang SC;
		color: $white-color;
	}

	.option-mine-wrap {
		padding: 31rpx 0 30rpx;
		background-color: #ffffff;
		/* box-shadow: 0rpx 0rpx 41rpx 10rpx #f0f6eb; */
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin-top: -20rpx;
	}

	.option-mine {
		width: 690rpx;
		height: 152rpx;
		border-radius: 24rpx;
		background: #fefffe;
		box-shadow: 4rpx 10rpx 44rpx 7rpx #c7d3d033;
		padding: 0 20rpx;
	}

	.kefu-btn {
		background-color: transparent;
		/* 设置为透明背景（如果需要） */
		outline: none;
		/* 去除点击时的焦点框（可选） */
		cursor: pointer;
		/* 鼠标悬停时显示手指形状，表示可点击（可选） */
		height: 102rpx;
	}

	.kefu-btn::after {
		border: none;
	}

	.dui-btn {
		height: 102rpx;
	}

	.dui-btn-top {
		height: 64rpx;
	}

	.dui-btn-img {
		width: 72rpx;
		height: 58rpx;
	}

	.jifen-btn-img {
		width: 62rpx;
		height: 62rpx;
	}

	.shou-btn-img {
		width: 54rpx;
		height: 64rpx;
	}

	.more-btn-img {
		width: 66rpx;
		height: 56rpx;
	}

	.dui-btn-text {
		font-weight: 500;
		font-size: 22rpx;
		color: #111111;
		margin-top: 8rpx;
		line-height: 30rpx;
	}

	.section {
		padding: 36rpx 40rpx;
		border-radius: 24rpx;
		background-image: url('https://terminator.axu9.com/images/sqfws-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_4 {
		line-height: 35rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 900;
		line-height: 35rpx;
	}

	.text_5 {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 900;
		line-height: 24rpx;
	}

	.group_5 {
		padding: 0 9rpx;
	}

	.image_3 {
		width: 18rpx;
		height: 24rpx;
	}

	.image_33 {
		width: 18rpx;
		height: 22rpx;
	}

	.font_3 {
		font-size: 20rpx;
		font-family: PingFang SC;
		color: #ffffff;
		margin-left: 10rpx;
	}

	.text_6 {
		line-height: 20rpx;
	}

	.text_7 {
		line-height: 16rpx;
	}

	.group_6 {
		padding-bottom: 57rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27rpx;
		color: #111111;
		margin-right: 180rpx;
	}

	.font_4:last-child {
		margin-right: 0;
	}

	.text_8 {
		margin-left: 219rpx;
	}

	.text_9 {
		line-height: 26rpx;
	}

	.section_2 {
		margin-left: 223rpx;
		background-color: #00bf60;
		border-radius: 3rpx;
		width: 46rpx;
		height: 6rpx;
	}

	.equal-division {
		/* margin: 3rpx 24rpx 0; */
		width: 674rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 100rpx;
	}

	.group_7 {
		/* flex: 1 1 350rpx; */

	}

	.equal-division-item {
		/* padding: 10rpx 10rpx 10rpx 14rpx; */
		width: 48%;
	}

	/* .section_4 {
	  border-radius: 24rpx;
	  background-image: url('https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=e0fd0f449dfc3bf671d042a7c187d5aa.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	} */
	.video-poster {
		/* width: 327rpx; */
		height: 450rpx;
		width: 100%;
		/* height: 450rpx; */
		border-radius: 24rpx;
	}

	.section_3 {
		/* padding: 170rpx 19rpx 186rpx 42rpx; */
		width: 100%;
		/* height: 100%; */
		/* width: 327rpx; */
		height: 450rpx;
		/* background-color: #1111118a; */
		border-radius: 24rpx;
		/* position: absolute;
		z-index: 999; */
		// background-image: url("https://terminator.axu9.com/images/mine-video-poster.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_10 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
	}

	.text_11 {
		margin-right: 14rpx;
		margin-top: 23rpx;
		color: #ffffff;
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 17rpx;
	}

	.section_6 {
		margin-top: 7rpx;
		/* background-color: #ffffff61; */
		border-radius: 8rpx;
		/* width: 70%; */
	}

	.hecheng-loading-img {
		width: 200rpx;
		height: 200rpx;
	}

	.section_7 {
		background-image: linear-gradient(88deg, #0153ab 0%, #33c5d8 34%, #00c959 86%, #00c959 100%);
		border-radius: 8rpx;
		width: 158rpx;
		height: 16rpx;
	}

	.options {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 999;
	}

	.font_5 {
		max-width: 100%;
		font-size: 28rpx;
		word-break: break-all;
		font-family: PingFang SC;
		/* line-height: 27rpx; */
		font-weight: 500;
		margin-bottom: 25rpx;
		color: #111111;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制在一个块元素显示的文本的行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.text_12 {
		margin-left: 3rpx;
	}

	.section_5 {
		padding: 32rpx 19rpx 261rpx;
		border-radius: 24rpx;
		background-image: url('https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=e0fd0f449dfc3bf671d042a7c187d5aa.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.huancun-icon {
		border-radius: 50%;
		background-color: red;
		background-color: rgba(0, 0, 0, 0.3);
		width: 67rpx;
		height: 67rpx;
	}
	.image_4 {
		width: 67rpx;
		height: 68rpx;
	}
	.img-huancun {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.group_8 {
		margin-top: 20rpx;
		padding: 0 36rpx;
	}

	.section_8 {
		flex: 1 1 326rpx;
		padding: 32rpx 19rpx 261rpx;
		border-radius: 24rpx;
		background-image: url('https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=e0fd0f449dfc3bf671d042a7c187d5aa.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 450rpx;
	}

	.view {
		margin-left: 24rpx;
	}

	.section_9 {
		padding: 0 89rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 9.4rpx 0.6rpx #c3c3c36e;
	}

	.pos {
		position: absolute;
		left: 0;
		right: 0;
		top: 322rpx;
	}

	.group_10 {
		width: 72rpx;
	}

	.image_7 {
		width: 41rpx;
		height: 43rpx;
	}

	.font_6 {
		font-size: 20rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 500;
		color: #111111;
	}

	.image_6 {
		width: 38rpx;
		height: 48rpx;
	}

	.group_9 {
		margin-right: 3rpx;
	}

	.image_5 {
		width: 72rpx;
		height: 72rpx;
	}

	.image_55 {
		width: 88rpx;
		height: 40rpx;
		margin-right: 40rpx;
	}

	.image_opt {
		width: 80rpx;
		height: 80rpx;
	}

	.active {
		position: relative;
	}

	.active::after {
		position: absolute;
		content: "";
		left: 50%;
		bottom: -20rpx;
		transform: translateX(-50%);
		background-color: $theme-color;
		border-radius: 3rpx;
		width: 46rpx;
		height: 6rpx;
	}

	.add-voice {
		/* padding: 52rpx 0 55rpx; */
		background-image: url('https://terminator.axu9.com/images/mine-add-audio-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* border-radius: 20rpx; */
		width: 690rpx;
		height: 136rpx;
	}

	.add-voice-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.add-voice-text {
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #fff;
	}

	.clone-num {
		margin: 20rpx 0;
		font-size: 24rpx;
	}

	.voice-list {
		width: 690rpx;
	}

	.voice-list-item {
		width: 698rpx;
		/* padding: 52rpx 29rpx 52rpx 32rpx; */
		padding: 30rpx 29rpx 30rpx 32rpx;
		/* background-color: #f5f5f5; */
		// background-image: linear-gradient(90deg, #d6f4ed 0%, #ebfaf6 100%);
		background-color: $mine-yinse-used-bg;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.voice-list-item1 {
		width: 698rpx;
		/* padding: 52rpx 29rpx 52rpx 32rpx; */
		padding: 30rpx 29rpx 30rpx 32rpx;
		/* background-color: #f5f5f5; */
		// background-image: linear-gradient(90deg, #ffeeb1 0%, #fff7dd 100%);
		background-color: $mine-yinse-nouse-bg;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.voice-list-item-lf {
		/* width: 50%; */
		color: $mine-yinse-listitem-text-color;
		font-size: 30rpx;
		padding-right: 30rpx;
	}

	.voice-list-item-lf1 {
		/* width: 50%; */
		color: $mine-yinse-listitem-text-color;
		font-size: 30rpx;
	}

	.voice-list-status-img {
		width: 24rpx;
		height: 32rpx;
	}

	.voice-list-status-img1 {
		width: 18rpx;
		height: 27rpx;
	}

	.mobile {
		background-color: rgba(0, 0, 0, 0);
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		color: $theme-color;
		margin-left: 1px;
		border: 1px solid $theme-color;
		margin-top: 10px;
		border-radius: 26px;
		font-size: 11px;
		padding: 0 10rpx;
	}

	.edit-num {
		color: $mine-yinse-listitem-num-text-color;
		font-size: 24rpx;
		font-family: PingFang SC;
		margin-right: 20rpx;
	}

	.edit-title-img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.edit-btn {
		/* padding: 21rpx 18rpx 17rpx; */
		width: 121rpx;
		filter: drop-shadow(0rpx 0rpx 23rpx #42cb991c);
		border-radius: 12rpx;
		height: 66rpx;
		background-color: #f7fcfa;
	}

	.image_edit {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.text_edit {
		color: $mine-yinse-listitem-update-color;
		font-weight: 500;
		font-size: 24rpx;
		font-family: PingFang SC;
	}

	.upload-btn {
		/* padding: 16rpx 13rpx; */
		width: 121rpx;
		background-color: #ffffffad;
		box-shadow: 0rpx 0rpx 23rpx 4rpx #eedc9e1c;
		border-radius: 12rpx;
		height: 66rpx;
		border: 2rpx solid #ffffff;
	}

	.image_upload {
		width: 29rpx;
		height: 29rpx;
		margin-right: 8rpx;
	}

	.text_upload {
		color: $mine-yinse-listitem-upload-color;
		font-weight: 500;
		font-size: 24rpx;
		font-family: PingFang SC;
	}

	.invite {
		position: fixed;
		right: 10rpx;
		top: 800rpx;
	}

	.invite-img {
		width: 131rpx;
		height: 129rpx;
	}
</style>